<template>
  <div class="card" :style='
                            (!left?`margin-left:${style.margin3} ;`:``)+
                            (!top?`margin-top:${style.margin3} ;`:``)+
                            (!bottom?`margin-bottom:${style.margin3} ;`:``)+
                            (!right?`margin-right:${style.margin3} ;`:``)'>
    <slot></slot>
  </div>
</template>

<script>
import style from "base/global.scss"
export default {
  name: "MyCard",
  data() {
    return {
        style:style
    };
  },
  props: {
    top: {
      type: Boolean,
      default: false,
    },
    left: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: false,
    },
    bottom: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  border-radius: $radius-small;
  color: $color-text;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0px 2px 3px $color-shadow;
  padding: $padding3;
}
</style>
